<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<title>筛查列表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit"/>
		<meta http-equiv="Cache-Control" content="no-siteapp"/>
		<meta name="apple-mobile-web-app-title" content="移动端描述内容"/>
		<link rel="icon" type="image/png" href="/assets/common/i/favicon.ico"/>
		
		<link rel="stylesheet" href="/assets/perpageres/vant.min.css"/>
		<script src="/assets/perpageres/vue.min.js"></script>
		<script src="/assets/perpageres/vant.min.js"></script>
		<script src="/assets/perpageres/zepto.min.js"></script>
		
		<script src="//at.alicdn.com/t/font_783249_e5yrsf08rap.js"></script>
		<style>
			.van-popup--center{
				width:100% !important;
				height:100% !important;
			}
		</style>
	</head>
	
	<body style="padding:0;margin:0;background-color:#efefef;">
		
		
		<div id="VueBigBox" style="width:100%;box-sizing: border-box;">
			
			<div style="width:100%;display:flex;text-align:center;height:50px;background-color:#D5B391;color:#000;font-size:16px;line-height:50px;">
				<div style="flex:1;text-align:left;padding-left:10px;" @click="jumpUrl(1)"><van-icon name="bag-o" color="#000" />新增</div>
				<div>医疗共建筛查列表</div>
				<div style="flex:1;text-align:right;padding-right:10px;" @click="jumpUrl(2)"><van-icon name="shop-o" color="#000" />列表</div>
			</div>
			
			<div  v-if="dataList.length==0" style="padding:20px;box-sizing: border-box;background-color:#FFF;border-radius:10px;width:98%;margin:10px auto;">
				<van-empty description="您还未提交任何订单" />
			</div>
			
			<div v-if="dataList.length>0"  v-for="(item,index) in dataList" style="padding:20px;box-sizing: border-box;background-color:#FFF;border-radius:10px;width:98%;margin:10px auto;">
				<div style="display:flex;">
					<div style="width:60px;">
						<img :src="IMG(item.u_avatarUrl)" style="width:60px;height:60px;border-radius:50%;" />
					</div>
					<div style="flex:1;font-size:13px;padding-left:10px;color:#333;">
						<div style="color:#00F;font-weight:bold;">{{item.u_nickName}}</div>
						<div style="display: flex;">
							<div style="flex:1;">{{item.u_trueName}}<span v-html="item.u_sex==1 ? '男' : '女'"></span>（{{item.u_mobile}}）</div>
							<div style="width:80px;color:#F00;font-size:14px;font-weight:bold;text-align:right;">¥ {{item.r_allPrice}}</div>
						</div>
						<div style="color:#666;">地址：{{item.u_address}}</div>
						<div style="color:#666;font-weight:bold;">{{item.u_project}}</div>
						<div style="display: flex;padding-top:10px;">
							<div>
								<span style="color:#0F0;font-weight:bold;" v-if="item.r_payState==8">已支付</span>
								<span style="color:#F00;font-weight:bold;" v-if="item.r_payState!=8">未支付</span>
								<span style="color:#D5B391;font-weight:bold;" v-if="item.r_payType==1">会员通道</span>
								<span style="color:#D5B391;font-weight:bold;" v-if="item.r_payType==2">线上支付</span>
								<br><span style="padding-top:5px;">{{item.r_createtime}}</span>
							</div>
							<div style="text-align:center;color:#000;font-weight:bold;font-size:14px;">
								<div v-if="item.r_state==20">未使用</div>
								<div v-if="item.r_state==60">使用中</div>
								<div v-if="item.r_state==80">（已到院）</div>
							</div>
							<div style="flex:1;text-align:right;" v-if="item.r_state<20">
								<van-button size="small" type="warning" color="#D5B391" @click="orderMa22(item)">公众号订单码</van-button>
								<!-- <van-button size="small" type="warning" color="#D5B391" @click="orderMa(item)">订单二维码</van-button> -->
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<van-popup v-model="show">
				<div>
					<van-dialog style="width:80%;height:420px;" v-model="show" :title="title">
						<div><img :src="nowerImg" style="width:100%;" /></div>
					</van-dialog>
				</div>
			</van-popup>
			
		</div>
	</body>
</html>
<script type="text/javascript">
	var YU = '#{$other["YU"]}#';
	var vue = new Vue({
		el: '#VueBigBox',
		data:{
			test:123456,
			show:false,
			title:"",
			nowerImg:'',
			dataList: #{$createList}#,
			ajaxisRunning:false
		},
		methods:{
			testFun(aa){
				vue.test = aa;
			},
			jumpUrl(cnt){
				if(cnt==1){
					window.location.href = "/index.php?s=/mobile/perpage/index";
				}
				else{
					window.location.href = "/index.php?s=/mobile/perpage/createlist";
				}
			},
			IMG(src){
				var back = src!="" ? src : '/assets/store/img/dealer/avatar.png';
				return back;
			},
			orderMa(item){
				// 发送数据请求
				if(this.ajaxisRunning==true){
					vant.Toast('请勿重复点击');
				}
				$.post(YU+'/index.php?s=/mobile/perpage/getOrderImg', {
					r_id:item.r_id,u_project:item.u_project
				}, function (res) {
					vue.ajaxisRunning = false;
					console.log(res)
					if(res.code){
						//居中显示图片
						vue.show = true
						vue.title = "订单二维码（"+res.data.r_id+"）"
						vue.nowerImg = res.data.imgPath
					}
					else{
						vant.Dialog.alert({message: res.msg})
					}
				})
			},
			orderMa22(item){
				// 发送数据请求
				if(this.ajaxisRunning==true){
					vant.Toast('请勿重复点击');
				}
				$.post(YU+'/index.php?s=/mobile/perpage/getGuzhuImg', {
					r_id:item.r_id,u_project:item.u_project
				}, function (res) {
					vue.ajaxisRunning = false;
					console.log(res)
					if(res.code){
						//居中显示图片
						vue.show = true
						vue.title = "订单二维码（"+res.data.r_id+"）"
						vue.nowerImg = res.data.imgPath
					}
					else{
						vant.Dialog.alert({message: res.msg})
					}
				})
			}
		}
	});
	
	// vant.Toast('成功启用vant框架');
	Vue.use(vant.Button);	// 初级组件可不用use引用
	Vue.use(vant.Switch);
	Vue.use(vant.Picker);	// 高级组件需要use引用
	Vue.use(vant.Form);
	Vue.use(vant.Field);
	Vue.use(vant.Checkbox);
	Vue.use(vant.Popup);
	Vue.use(vant.Dialog);
	
	//vant.Dialog.alert({message: '弹窗内容'})
	// vant.Dialog.alert({message: '#{$other["YU"]}#'})
</script>